
<template>
  <div class="JNPF-common-layout">
    <div class="JNPF-common-layout-center">
      <el-row class="JNPF-common-search-box" :gutter="16">
        <el-form @submit.native.prevent>
            <el-col :span="6">
            <el-form-item label="处置卡名称">
                <el-input v-model="query.yjkmc" placeholder="处置卡名称" clearable  />
            </el-form-item>
            </el-col>
            <el-col :span="6">
            <el-form-item label="所属区域">
                <el-select filterable v-model="query.fscs" placeholder="所属区域" clearable >
                <el-option v-for="(item, index) in fscsOptions" :key="index" :label="item.MC" :value="item.ID"  />
                </el-select>
            </el-form-item>
            </el-col>
            <el-col :span="6">
            <el-form-item>
                <el-button type="primary" icon="el-icon-search" @click="search()">查询</el-button>
                <el-button icon="el-icon-refresh-right" @click="reset()">重置</el-button>
            </el-form-item>
            </el-col>
        </el-form>
      </el-row>
      <div class="JNPF-common-layout-main JNPF-flex-main">
    <div class="JNPF-common-head">
        <div>
        <el-button type="primary" icon="el-icon-plus" @click="addOrUpdateHandle()">新增</el-button>
        <el-button type="text" icon="el-icon-download" @click="exportData()">导出</el-button>
        </div>
        <div class="JNPF-common-head-right">
            <el-tooltip effect="dark" content="刷新" placement="top">
                <el-link icon="icon-ym icon-ym-Refresh JNPF-common-head-icon" :underline="false"  @click="reset()" />
            </el-tooltip>
            <screenfull :isContainer="true" />
            <el-tooltip effect="dark" content="列设置" placement="top">
                <el-link icon="icon-ym icon-ym-options JNPF-common-head-icon" :underline="false" />
            </el-tooltip>
        </div>
    </div>
    <JNPF-table v-loading="listLoading" :data="list">
    <el-table-column prop="yjkmc" width="90px" label="处置卡名称" align="left" />
    <el-table-column prop="glgwmc" label="岗位名称" align="left" />
    <el-table-column prop="czkbh" width="90px" label="处置卡编号" align="left" />
    <el-table-column prop="sgfx" label="事故风险" align="left" />
    <el-table-column label="所属区域"  prop="fscs" algin="left">
        <template slot-scope="scope">{{ scope.row.fscs | dynamicText(fscsOptions) }}</template>
    </el-table-column>
    <el-table-column prop="gysm" label="工艺说明" align="left" />
    <el-table-column prop="sgtz" label="事故特征" align="left" />
    <el-table-column prop="whms" label="危害描述" align="left" />
    <el-table-column prop="bzsm" label="步骤说明" align="left" />
    <el-table-column prop="czcs" label="处置措施" align="left" />
    <el-table-column width="100px" label="主要责任人"  prop="zyzrr" algin="left">
        <template slot-scope="scope">{{ scope.row.zyzrr | dynamicText(zyzrrOptions) }}</template>
    </el-table-column>
    <el-table-column prop="zysx" label="注意事项" align="left" />
    <el-table-column prop="nbyjdh" width="110px" label="内部应急电话" align="left" />
    <el-table-column prop="wbyjdh" width="110px" label="外部应急电话" align="left" />
    <el-table-column label="操作" fixed="right" width="150">
        <template slot-scope="scope">
        <el-button type="text" @click="addOrUpdateHandle(scope.row.id)" >
            编辑
        </el-button>
        <el-button type="text" @click="handleDel(scope.row.id)" class="JNPF-table-delBtn">
            删除
        </el-button>
        <el-button type="text" @click="addOrUpdateHandle(scope.row.id,true)" >
            详情
        </el-button>
        </template>
    </el-table-column>
    </JNPF-table>
    <pagination :total="total" :page.sync="listQuery.currentPage" :limit.sync="listQuery.pageSize" @pagination="initData" />
      </div>
    </div>
    <JNPF-Form v-if="formVisible" ref="JNPFForm" @refresh="refresh" />
    <ExportBox v-if="exportBoxVisible" ref="ExportBox" @download="download" />
  </div>
</template>

<script>
    import request from '@/utils/request'
    import {getDictionaryDataSelector} from '@/api/systemData/dictionary'
    import JNPFForm from './Form'
    import ExportBox from './ExportBox'
    import {previewDataInterface} from '@/api/systemData/dataInterface'
export default {
  name:'aqscYjczk',
    data() {
      return {
        showAll: false,
        query: {
        yjkmc:undefined,
        fscs:undefined,
        },
        defaultProps: {
        children: 'children',
        label: 'fullName'
        },
        list: [],
        listLoading: true,
        total: 0,
        listQuery: {
        currentPage: 1,
        pageSize: 20,
        sort: "desc",
        sidx: "",
        },
        formVisible: false,
        exportBoxVisible: false,
        columnList: [
        {prop: 'yjkmc', label: '处置卡名称'},
        {prop: 'glgwmc', label: '岗位名称'},
        {prop: 'czkbh', label: '处置卡编号'},
        {prop: 'sgfx', label: '事故风险'},
        {prop: 'fscs', label: '所属区域'},
        {prop: 'gysm', label: '工艺说明'},
        {prop: 'sgtz', label: '事故特征'},
        {prop: 'whms', label: '危害描述'},
        {prop: 'bzsm', label: '步骤说明'},
        {prop: 'czcs', label: '处置措施'},
        {prop: 'zyzrr', label: '主要责任人'},
        {prop: 'zysx', label: '注意事项'},
        {prop: 'nbyjdh', label: '内部应急电话'},
        {prop: 'wbyjdh', label: '外部应急电话'},
        ],
        fscsOptions:[],
        zyzrrOptions:[],
      }
   },
    components:{JNPFForm,ExportBox},
    created() {
      this.initData();
      this.getfscsOptions();
      this.getzyzrrOptions();
    },
    methods: {
      getfscsOptions() {
        previewDataInterface('e7b2c31f5a7147c08629c5409dd7fdf4').then(res => {
          this.fscsOptions = res.data
        })
	  },
      getzyzrrOptions() {
        previewDataInterface('8bca424f16d6448ab09e57a028853aa9').then(res => {
          this.zyzrrOptions = res.data
        })
      },
      initData() {
        this.listLoading = true;
        let query = {
          ...this.listQuery,
          ...this.query
        };
        request({
          url: `/api/system/aqscYjczk`,
          method: 'get',
          data: query
        }).then(res => {
          this.list = res.data.list
          this.total = res.data.pagination.total
          this.listLoading = false
          this.$nextTick(() => {
              this.tableHeight = "100%"
          });
        })
      },
      handleDel(id) {
        this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
          type: 'warning'
        }).then(() => {
          request({
            url: `/api/system/aqscYjczk/${id}`,
            method: 'DELETE'
            }).then(res => {
              this.$message({
                type: 'success',
                message: res.msg,
                onClose: () => {
                  this.initData()
                }
              });
            })
        }).catch(() => {
        });
      },
      addOrUpdateHandle(id,isDetail) {
        this.formVisible = true
        this.$nextTick(() => {
          this.$refs.JNPFForm.init(id,isDetail)
        })
      },
      exportData() {
        this.exportBoxVisible = true
        this.$nextTick(() => {
          this.$refs.ExportBox.init(this.columnList)
        })
      },
      download(data) {
        let query = {...data, ...this.listQuery, ...this.query}
        request({
          url: `/api/system/aqscYjczk/Actions/Export`,
          method: 'POST',
          data: query
        }).then(res => {
          if (!res.data.url) return
          window.location.href = this.define.comUrl + res.data.url
          this.$refs.ExportBox.visible = false
          this.exportBoxVisible = false
        })
      },
      search() {
        this.listQuery = {
          currentPage: 1,
          pageSize: 20,
          sort: "desc",
          sidx: "",
        }
        this.initData()
      },
      refresh(isrRefresh) {
        this.formVisible = false
        if (isrRefresh) this.reset()
      },
      reset() {
        for (let key in this.query) {
          this.query[key] = undefined
        }
        this.listQuery = {
          currentPage: 1,
          pageSize: 20,
          sort: "desc",
          sidx: "",
        }
        this.initData()
      }
    }
}
</script>